import { createRouter, createWebHashHistory } from 'vue-router'
import Props from "@/pages/01_props/Father.vue";
import Event from "@/pages/02_custom-event/Father.vue";
import Bus from "@/pages/03_mitt/Father.vue";
import Model from "@/pages/04_v-model/Father.vue";
import AttrsListeners from "@/pages/05_$attrs/Father.vue";
import RefChildrenParent from "@/pages/06_$refs-$parent/Father.vue";
import ProvideInject from "@/pages/07_provide-inject/Father.vue";
import Pinia from "@/pages/08_pinia/Father.vue";
import Slot from "@/pages/09_slot/Father.vue";
import Shallow from "@/pages/10_shallow/Father.vue";
import Main from "@/pages/Main.vue";
import Login from "@/pages/Login.vue";
import NotFound from "@/pages/NotFound.vue";
import Flex from "@/pages/11_flex/Father.vue";


const router = createRouter({
    history: createWebHashHistory(),
    routes: [

        {
            path: '/', component: Main, redirect: "/props",
            children: [{ path: '/props', component: Props },
            { path: '/event', component: Event },
            { path: '/mitt', component: Bus },
            { path: '/model', component: Model },
            { path: '/attrs', component: AttrsListeners },
            { path: '/ref-parent', component: RefChildrenParent },
            { path: '/provide-inject', component: ProvideInject },
            { path: '/pinia', component: Pinia },
            { path: '/Slot', component: Slot },
            { path: '/Shallow', component: Shallow, meta: { requiresAuth: true, kk: 123 }, },
            { path: '/Flex', component: Flex },
        ]
        },
        { path: '/Login', component: Login, name: "Login" },
        { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

    ]
})

router.beforeEach((to, from, next) => {


    if (to.name !== 'Login' && !localStorage.getItem('token')) {
        // 登录守卫
        next({ name: "Login" })
    }

    else {
        next()
    }

})


export default router